<template>
  <div>
    <!--
     el-tree
        :data:树形数据
        :props:{
          label:'label',
          children:'children'
        }
      @node-click=(obj)=>{obj点击项的数据}
      作用域插槽（默认插槽）
        #default="scope"
        scope.data:当前行数据

    作用域插槽：插槽组件传值给插槽
      定义
         xxx.vue
            <div>
               ....
                <slot :num='123' />
            </div>
      使用
        <xxx>
            <template #default="scope">
              scope:{num:123}
            <div>我是默认插槽</div>
            </template>
          </xxx>

     -->
    <el-tree
      :data="treeData"
      :props="{
        label:'name',
        children:'child'
      }"
      @node-click="handleNodeClick"
    >
      <template #default="scope">
        <div class="item">
          <div>{{ scope.data.name }}</div>
          <div class="right">我是右边内容</div>
        </div>
      </template>
    </el-tree>
    <hr>
    <SlotSon>
      <template #default="{str}">
        <!-- scope:{str} -->
        <h3>{{ str }}</h3>
      </template>
    </SlotSon>
  </div>
</template>
<script>
import SlotSon from './components/SlotSon.vue'
export default {
  components: {
    SlotSon
  },
  data() {
    return {
      // 广东==》广州与深圳（宝安与南山）
      treeData: [
        { name: '广东', child: [
          { name: '广州' },
          { name: '深圳', child: [
            { name: '宝安' },
            { name: '南山' }
          ] }
        ] }
      ]

    }
  },
  created() {

  },
  methods: {
    handleNodeClick(obj) {
      console.log(obj)
    }
  }
}
</script>
<style lang='scss' scoped>
.item{
  display: flex;
 width: 100%;
 justify-content: space-between;
}
</style>
